<template>
  <div class="user-collect">
    <el-tabs type="card" @tab-click="handleClick" style="height: 100%">
      <el-tab-pane label="收藏" style="height: 100%" v-loading="dataLoading">
        <div v-if="dataList.length > 0" style="width: 100%; height: 100%">
          <CommonCollectItem :dataList="dataList"></CommonCollectItem>
          <el-pagination
            v-show="dataList.length > 0"
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="total"
            :page-count="7"
            background
            style="text-align: right; margin-top: 20px"
          >
          </el-pagination>
        </div>
        <div class="empty" v-else="!dataList.length > 0">
          <el-empty description="暂无数据，快去添加吧~"> </el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="看过" style="height: 100%" v-loading="dataLoading">
        <div v-if="dataList.length > 0" style="width: 100%; height: 100%">
          <CommonCollectItem :dataList="dataList"></CommonCollectItem>
          <el-pagination
            v-show="dataList.length > 0"
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="total"
            background
            style="text-align: right; margin-top: 20px"
          >
          </el-pagination>
        </div>
        <div class="empty" v-else="!dataList.length > 0">
          <el-empty description="暂无数据，快去添加吧~"> </el-empty></div
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CommonCollectItem from "@/components/CommonCollectItem.vue";
import { getWantOrSeeList } from "@/api/common";
import userInfo from "@/utils/userInfo";
export default {
  name: "UserCollection",
  data() {
    return {
      // wantOrSee分页
      page: 1,
      pageSize: 18,
      total: 0,
      // 当前页数
      currentPage: 1,
      want: 1,
      see: 0,
      // 加载
      dataLoading: false,
      // 数据集合
      dataList: [],
    };
  },
  components: {
    CommonCollectItem,
  },
  created() {
    this.getWantOrSeeList();
  },
  methods: {
    // 获取wantOrSee列表
    async getWantOrSeeList() {
      try {
        this.dataLoading = true;
        const res = await getWantOrSeeList({
          page: this.page,
          pageSize: this.pageSize,
          wantStatus: this.want,
          seeStatus: this.see,
          userId: userInfo.getUser().userId,
        });
        this.total = res.data.total;
        this.dataList = res.data.records;
      } catch {
        this.$message.error("获取列表失败");
      } finally {
        this.dataLoading = false;
      }
    },
    // 标签页切换
    handleClick(tab, event) {
      // 判断当前点击的是哪个标签页
      this.page = 1;
      const tabName = tab.label;
      if (tabName === "收藏") {
        this.want = 1;
        this.see = 0;
        this.getWantOrSeeList();
      } else if (tabName === "看过") {
        this.want = 0;
        this.see = 1;
        this.getWantOrSeeList();
      }
    },
    // 当前页发生改变时触发
    handleCurrentChange(val) {
      this.page = val;
      this.getWantOrSeeList();
    },
  },
};
</script>

<style lang="less" scoped>
.user-collect {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>